<template>
    <div>
        <div class="submitOrder">
            <div class="info">
                <div class="order-msg">
                    <div class="msg1">
                        <span
                            v-if="formData.rankType && (formData.mode == '排位赛' || formData.mode == '定位赛' || formData.mode == '宝典')">{{
                                formData.rankType
                            }}</span>
                        <span v-if="formData.gameMode && (formData.mode == '代币' || formData.mode == '宝典')">{{
                            formData.gameMode }}</span>
                        <span v-if="formData.currentScore && formData.mode == '排位赛'">（已有{{ formData.currentScore
                            }}胜点）</span>
                        <span v-if="formData.beforeLevel && formData.mode == '定位赛'">{{ formData.beforeLevel }}</span>
                        <span v-if="formData.currentScore">{{ formData.currentScore }}</span>
                        <span v-if="formData.needGames && formData.mode == '定位赛'">定位赛{{ formData.needGames }}</span>
                        <span v-if="formData.selectPass && (formData.mode == '代币' || formData.mode == '宝典')">{{
                            formData.selectPass }}</span>
                        <span v-if="formData.currentTokens && formData.toTokens && formData.mode == '代币'">代币{{
                            formData.currentTokens
                            }}个-{{ formData.toTokens }}个</span>
                        <span v-if="formData.currentLevel && formData.toLevel && formData.mode == '宝典'">宝典{{
                            formData.currentLevel
                            }}级-{{ formData.toLevel }}级</span>
                        <span v-if="hero">{{ hero }}</span>
                        <span v-if="formData.currentTask && formData.toTask && formData.mode == '排位赛'">{{
                            formData.currentTask
                            }}-{{ formData.toTask }}</span>
                        <span v-else-if="formData.currentTask">{{ formData.currentTask }}</span>
                    </div>
                    <!-- <div class="msg2">
                    <span v-if="formData.mingwenLevel && formData.heroCount">铭文{{ formData.mingwenLevel }}级 英雄数量{{
                        formData.heroCount }}个</span>
                    <span v-else-if="formData.mingwenLevel">铭文{{ formData.mingwenLevel }}级</span>
                </div> -->
                </div>
                <div class="preferred-price">
                    <div class="title">优选价</div>
                    <div class="price">
                        <span class="price-value-amount">{{ price }}</span> 元
                    </div>
                    <div class="time">{{ time }}小时</div>
                    <div class="tip" v-if="formData.mode != '宝典'">指定高级胜率保证，完单胜率70-79只需支付百分之80代练费</div>
                    <div class="tip" v-if="formData.mode == '宝典'">根据建议价发布，在众多订单钟脱颖而出</div>
                    <image @click="showPricePicker" src="../../../../static/icons/edit.png"></image>
                </div>
            </div>
            <div class="login-mode">
                <div class="tab">账号密码登录</div>
                <div class="username">
                    <div class="label">游戏账号</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的游戏账号" v-model="gameAccount">
                    </div>
                </div>
                <div class="username">
                    <div class="label">游戏密码</div>
                    <div class="handle">
                        <input type="password" placeholder="请输入您的游戏密码" v-model="gamePassword">
                    </div>
                </div>
                <div class="phone">
                    <div class="label">游戏角色</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入您的游戏角色名" v-model="gameRole">
                    </div>
                </div>
                <div class="contact">
                    <div class="label">发单者联系方式（必填）</div>
                    <div class="handle">
                        <input type="text" placeholder="请输入发单者的联系方式" v-model="contactInfo">
                    </div>
                </div>
            </div>
            <div class="point-hero" v-if="formData.mode != '宝典'">
                <div class="label">指定英雄（加价30%）</div>
                <div class="handle" @click="showHeroPicker">
                    <view class="selected-tag">
                        {{ hero || '请选择指定英雄' }}
                        <image src="../../../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <div class="special-task">
                <div class="label">特殊要求</div>
                <div class="handle" @click="showSpecialPicker">
                    <view class="selected-tag">
                        {{ '保证金/订单要求等' }}
                        <image src="../../../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <div class="footer">
                <div class="button" @click="submitOrder">发布订单</div>
            </div>
        </div>
        <!-- 优选价弹窗 -->
        <uni-popup ref="pricePopup" type="bottom">
            <view class="popup-content">
                <view>
                    <div class="level">
                        <span>价格（元）</span>
                        <input type="number" placeholder="请输入价格" v-model="price">
                    </div>
                    <div class="role">
                        <span>时限（小时）</span>
                        <input type="number" placeholder="请输入时限" v-model="time">
                    </div>
                </view>
                <view class="popup-footer2">
                    <span class="cancel" @click="hidePricePicker">取消</span>
                    <span class="confirm" @click="confirmPricePicker">确认</span>
                </view>
            </view>
        </uni-popup>
        <!-- 指定英雄弹窗 -->
        <uni-popup ref="heroPopup" type="bottom">
            <view class="popup-content">
                <HeroSelect :hero-list="heroTree" @select="selectHeroItem" />
                <!-- <scroll-view scroll-y class="popup-scroll">
                <view v-for="(item, index) in heroTree" :key="index" class="popup-item" @click="selectHeroItem(item)">
                    {{ item.text }}
                </view>
            </scroll-view>
            <view class="popup-footer" @click="hideHeroPicker">取消
            </view> -->
            </view>
        </uni-popup>
        <!-- 特殊要求弹窗 -->
        <uni-popup ref="specialPopup" type="bottom">
            <view class="popup-content">
                <div class="title">特殊要求</div>
                <div class="server">
                    <div class="server-title">
                        服务保障
                    </div>
                    <div class="server-content">
                        <div class="server-content-item">
                            <div class="server-content-item-text">安全保证金</div>
                            <div class="server-content-item-value">
                                <input type="number" v-model="securityDeposit">
                            </div>
                            <div class="server-content-item-unit">元</div>
                        </div>
                        <div class="server-content-item">
                            <div class="server-content-item-text">效率保证金</div>
                            <div class="server-content-item-value">
                                <input type="number" v-model="efficiencyDeposit">
                            </div>
                            <div class="server-content-item-unit">元</div>
                        </div>
                    </div>
                </div>
                <div class="order-require">
                    <div class="order-require-title">订单要求</div>
                    <!-- 排位赛-订单要求 -->
                    <div class="order-require-content" v-if="formData.mode == '排位赛'">
                        <div class="order-require-content-item"> 优选订单接单30分钟内开始代练，上号必须打开荣誉截图
                        </div>
                        <div class="order-require-content-item">1、定位赛5场:胜4结算，优选少一胜补一个段，现时超值补2个净胜，尝鲜特价补1个净胜
                        </div>
                        <div class="order-require-content-item">2、禁止使用第三方插件，换肤插件。不能私自动用账号物品，包括精粹，海克斯。
                        </div>
                        <div class="order-require-content-item">
                            3、禁止超时和负进度情况下3连败一页4红，大师以下订单，优选胜率不得低于80%，限时超值胜率不得低于70%尝鲜特价胜率不得低于60%。胜率不足最低扣除订单金额的20%，最高扣除50%。
                        </div>
                        <div class="order-require-content-item">
                            4、大师分单不考虑了连败一页4红，禁止超时，胜率不得低于60%，胜率不足则扣除订单金额的20%。5、补分必须严格按照补分规则上传截图，提交异常，等待回复处理。
                        </div>
                    </div>
                    <div class="order-require-content" v-if="formData.mode == '定位赛' | formData.mode == '宝典'">
                        <div class="order-require-content-item"> 优选订单接单30分钟内开始代练，上号必须打开荣誉截图
                        </div>
                        <div class="order-require-content-item">1、未经同意请勿动用账号点卷、物品，不要联系或回复好友信息
                        </div>
                        <div class="order-require-content-item">2、请勿使用外挂，不允许打广告、挂机、恶意骂人等恶意行为
                        </div>
                    </div>
                </div>
                <div class="special-require" v-if="formData.mode != '宝典'">
                    <div class="special-require-title">特殊要求</div>

                    <div class="special-require-content" v-if="formData.mode == '排位赛'">
                        <checkbox color="#57b1ff" :checked="compensatePoints"
                            @change="compensatePoints = !compensatePoints"></checkbox>
                        <span style="display: flex;align-items: center;">包补分 <i
                                style="color: #aaa;margin-left: 20rpx;">加价50%</i></span>
                    </div>
                    <div class="special-require-content">
                        <checkbox color="#57b1ff" :checked="penalty" @change="penalty = !penalty"></checkbox>
                        <span style="display: flex;align-items: center;">裁决之镰 <i
                                style="color: #aaa;margin-left: 20rpx;">加12小时</i></span>
                    </div>

                </div>
                <view class="popup-footer" @click="hideSpecialPicker">确定
                </view>
            </view>
        </uni-popup>
    </div>
</template>

<script>
import HeroSelect from "../../../../components/selectHeroForm/index.vue";
// Assuming API calls are defined elsewhere and imported if needed
// import { createOrder, checkText, uploadFile, getUserInfo } from '@/config/api';

export default {
    components: {
        HeroSelect
    },
    data() {
        return {
            // Data from route params
            formData: {
                server: '',
                mode: '',
                gameMode: '',
                selectPass: '',
                currentLevel: '',
                toLevel: '',
                currentTask: '',
                toTask: '',
                currentScore: '',
                needGames: '',
                beforeLevel: '',
                currentTokens: '',
                toTokens: '',
                rankType: '',
                // Add other potential fields from the previous component if necessary
            },
            // Price and Time (with default/initial values)
            price: '87', // Default based on image?
            time: '47', // Default based on image?
            // Login Info
            gameAccount: '',
            gamePassword: '',
            gameRole: '',
            contactInfo: '',
            // Hero Selection
            hero: '',
            heroTree: [
                // ... (Keep the long hero list here) ...
                { "text": "辛德拉", "value": "辛德拉" },
                { "text": "薇恩", "value": "薇恩" },
                { "text": "亚托克斯", "value": "亚托克斯" },
                { "text": "阿卡丽", "value": "阿卡丽" },
                { "text": "雷恩加尔", "value": "雷恩加尔" },
                { "text": "塔里克", "value": "塔里克" },
                { "text": "克烈", "value": "克烈" },
                { "text": "金克丝", "value": "金克丝" },
                { "text": "吉格斯", "value": "吉格斯" },
                { "text": "艾尼维亚", "value": "艾尼维亚" },
                { "text": "丽桑卓", "value": "丽桑卓" },
                { "text": "卡特琳娜", "value": "卡特琳娜" },
                { "text": "斯维因", "value": "斯维因" },
                { "text": "菲兹", "value": "菲兹" },
                { "text": "韦鲁斯", "value": "韦鲁斯" },
                { "text": "艾翁", "value": "艾翁" },
                { "text": "黑默丁格", "value": "黑默丁格" },
                { "text": "艾瑞莉娅", "value": "艾瑞莉娅" },
                { "text": "泰隆", "value": "泰隆" },
                { "text": "赵信", "value": "赵信" },
                { "text": "嘉文四世", "value": "嘉文四世" },
                { "text": "盖伦", "value": "盖伦" },
                { "text": "奎因", "value": "奎因" },
                { "text": "莫甘娜", "value": "莫甘娜" },
                { "text": "萨科", "value": "萨科" },
                { "text": "奥莉安娜", "value": "奥莉安娜" },
                { "text": "格雷福斯", "value": "格雷福斯" },
                { "text": "锐雯", "value": "锐雯" },
                { "text": "迦娜", "value": "迦娜" },
                { "text": "布隆", "value": "布隆" },
                { "text": "布兰德", "value": "布兰德" },
                { "text": "卡莉丝塔", "value": "卡莉丝塔" },
                { "text": "波比", "value": "波比" },
                { "text": "伊芙琳", "value": "伊芙琳" },
                { "text": "拉克丝", "value": "拉克丝" },
                { "text": "乐芙兰", "value": "乐芙兰" },
                { "text": "俄洛伊", "value": "俄洛伊" },
                { "text": "普朗克", "value": "普朗克" },
                { "text": "艾希", "value": "艾希" },
                { "text": "塔姆", "value": "塔姆" },
                { "text": "安妮", "value": "安妮" },
                { "text": "娜美", "value": "娜美" },
                { "text": "雷克顿", "value": "雷克顿" },
                { "text": "锤石", "value": "锤石" },
                { "text": "兰博", "value": "兰博" },
                { "text": "维克托", "value": "维克托" },
                { "text": "亚索", "value": "亚索" },
                { "text": "黛安娜", "value": "黛安娜" },
                { "text": "莫德凯撒", "value": "莫德凯撒" },
                { "text": "婕拉", "value": "婕拉" },
                { "text": "阿狸", "value": "阿狸" },
                { "text": "古拉加斯", "value": "古拉加斯" },
                { "text": "特朗德尔", "value": "特朗德尔" },
                { "text": "约里克", "value": "约里克" },
                { "text": "崔斯特", "value": "崔斯特" },
                { "text": "凯南", "value": "凯南" },
                { "text": "奈德丽", "value": "奈德丽" },
                { "text": "奥拉夫", "value": "奥拉夫" },
                { "text": "沃利贝尔", "value": "沃利贝尔" },
                { "text": "辛吉德", "value": "辛吉德" },
                { "text": "瑟庄妮", "value": "瑟庄妮" },
                { "text": "瑞兹", "value": "瑞兹" },
                { "text": "希瓦娜", "value": "希瓦娜" },
                { "text": "崔丝塔娜", "value": "崔丝塔娜" },
                { "text": "泰达米尔", "value": "泰达米尔" },
                { "text": "李青", "value": "李青" },
                { "text": "纳尔", "value": "纳尔" },
                { "text": "卡西奥佩娅", "value": "卡西奥佩娅" },
                { "text": "费德提克", "value": "费德提克" },
                { "text": "慎", "value": "慎" },
                { "text": "阿利斯塔", "value": "阿利斯塔" },
                { "text": "茂凯", "value": "茂凯" },
                { "text": "德莱厄斯", "value": "德莱厄斯" },
                { "text": "拉莫斯", "value": "拉莫斯" },
                { "text": "凯特琳", "value": "凯特琳" },
                { "text": "蔚", "value": "蔚" },
                { "text": "孙悟空", "value": "孙悟空" },
                { "text": "娑娜", "value": "娑娜" },
                { "text": "卡蜜尔", "value": "卡蜜尔" },
                { "text": "德莱文", "value": "德莱文" },
                { "text": "墨菲特", "value": "墨菲特" },
                { "text": "阿兹尔", "value": "阿兹尔" },
                { "text": "内瑟斯", "value": "内瑟斯" },
                { "text": "阿木木", "value": "阿木木" },
                { "text": "厄运小姐", "value": "厄运小姐" },
                { "text": "加里奥", "value": "加里奥" },
                { "text": "诺提勒斯", "value": "诺提勒斯" },
                { "text": "克格莫", "value": "克格莫" },
                { "text": "凯尔", "value": "凯尔" },
                { "text": "扎克", "value": "扎克" },
                { "text": "卢锡安", "value": "卢锡安" },
                { "text": "基兰", "value": "基兰" },
                { "text": "艾克", "value": "艾克" },
                { "text": "沃里克", "value": "沃里克" },
                { "text": "厄加特", "value": "厄加特" },
                { "text": "乌迪尔", "value": "乌迪尔" },
                { "text": "蕾欧娜", "value": "蕾欧娜" },
                { "text": "斯卡纳", "value": "斯卡纳" },
                { "text": "卡尔萨斯", "value": "卡尔萨斯" },
                { "text": "伊泽瑞尔", "value": "伊泽瑞尔" },
                { "text": "卡尔玛", "value": "卡尔玛" },
                { "text": "赛恩", "value": "赛恩" },
                { "text": "杰斯", "value": "杰斯" },
                { "text": "图奇", "value": "图奇" },
                { "text": "易", "value": "易" },
                { "text": "菲奥娜", "value": "菲奥娜" },
                { "text": "贾克斯", "value": "贾克斯" },
                { "text": "烬", "value": "烬" },
                { "text": "璐璐", "value": "璐璐" },
                { "text": "维迦", "value": "维迦" },
                { "text": "巴德", "value": "巴德" },
                { "text": "弗拉基米尔", "value": "弗拉基米尔" },
                { "text": "雷克塞", "value": "雷克塞" },
                { "text": "卡萨丁", "value": "卡萨丁" },
                { "text": "科加斯", "value": "科加斯" },
                { "text": "卡兹克", "value": "卡兹克" },
                { "text": "玛尔扎哈", "value": "玛尔扎哈" },
                { "text": "维克兹", "value": "维克兹" },
                { "text": "努努和威朗普", "value": "努努和威朗普" },
                { "text": "提莫", "value": "提莫" },
                { "text": "塔莉垭", "value": "塔莉垭" },
                { "text": "库奇", "value": "库奇" },
                { "text": "劫", "value": "劫" },
                { "text": "魔腾", "value": "魔腾" },
                { "text": "千珏", "value": "千珏" },
                { "text": "泽拉斯", "value": "泽拉斯" },
                { "text": "希维尔", "value": "希维尔" },
                { "text": "潘森", "value": "潘森" },
                { "text": "赫卡里姆", "value": "赫卡里姆" },
                { "text": "布里茨", "value": "布里茨" },
                { "text": "伊莉丝", "value": "伊莉丝" },
                { "text": "索拉卡", "value": "索拉卡" },
                { "text": "奥瑞利安·索尔", "value": "奥瑞利安·索尔" },
                { "text": "蒙多医生", "value": "蒙多医生" },
                { "text": "厄斐琉斯", "value": "厄斐琉斯" },
                { "text": "卡莎", "value": "卡莎" },
                { "text": "凯隐", "value": "凯隐" },
                { "text": "莉莉娅", "value": "莉莉娅" },
                { "text": "妮蔻", "value": "妮蔻" },
                { "text": "奥恩", "value": "奥恩" },
                { "text": "派克", "value": "派克" },
                { "text": "奇亚娜", "value": "奇亚娜" },
                { "text": "洛", "value": "洛" },
                { "text": "芮尔", "value": "芮尔" },
                { "text": "莎弥拉", "value": "莎弥拉" },
                { "text": "赛娜", "value": "赛娜" },
                { "text": "萨勒芬妮", "value": "萨勒芬妮" },
                { "text": "瑟提", "value": "瑟提" },
                { "text": "塞拉斯", "value": "塞拉斯" },
                { "text": "佛耶戈", "value": "佛耶戈" },
                { "text": "霞", "value": "霞" },
                { "text": "永恩", "value": "永恩" },
                { "text": "悠米", "value": "悠米" },
                { "text": "佐伊", "value": "佐伊" },
                { "text": "格温", "value": "格温" },
                { "text": "阿克尚", "value": "阿克尚" },
                { "text": "薇古丝", "value": "薇古丝" },
                { "text": "泽丽", "value": "泽丽" },
                { "text": "烈娜塔", "value": "烈娜塔" },
                { "text": "尼菈", "value": "尼菈" },
                { "text": "卑尔维斯", "value": "卑尔维斯" },
                { "text": "奎桑提", "value": "奎桑提" },
                { "text": "明烛", "value": "明烛" },
                { "text": "纳亚菲利", "value": "纳亚菲利" },
                { "text": "贝蕾亚", "value": "贝蕾亚" },
                { "text": "斯莫德", "value": "斯莫德" },
                { "text": "阿萝拉", "value": "阿萝拉" }
            ],
            // Special Requirements
            securityDeposit: 5,
            efficiencyDeposit: 5,
            compensatePoints: false, // For '包补分' checkbox
            penalty: false,          // For '裁决之镰' checkbox
        };
    },
    onLoad(options) {
        if (options.formData) {
            try {
                const parsedData = JSON.parse(decodeURIComponent(options.formData));
                // Merge parsed data into this.formData, preserving existing structure
                this.formData = { ...this.formData, ...parsedData };
                console.log("Received formData:", this.formData);
                // You might want to set default price/time based on received data here
                // e.g., this.calculateInitialPrice();
            } catch (e) {
                console.error("Failed to parse formData from route params:", e);
                uni.showToast({ title: '加载订单信息失败', icon: 'none' });
            }
        } else {
            console.warn("No formData found in route params.");
            // Handle cases where formData is missing, maybe show an error or defaults
            uni.showToast({ title: '缺少订单信息', icon: 'none' });
        }
        // Pre-fill contact info if available from user store/API (example)
        // this.fetchUserInfoAndPrefill();
    },
    methods: {
        // Example: Fetch user info to prefill contact
        // async fetchUserInfoAndPrefill() {
        //     try {
        //         const res = await getUserInfo(); // Assume this API exists
        //         if (res.code === 200 && res.data) {
        //              // Use a separate data property for contact info to avoid overwriting if user edits
        //             this.contactInfo = res.data.phone || res.data.qq || '';
        //         }
        //     } catch (error) {
        //         console.error("Error fetching user info for prefill:", error);
        //     }
        // },

        // Price Popup Methods
        showPricePicker() {
            if (this.$refs.pricePopup) {
                this.$refs.pricePopup.open();
            } else {
                console.error("pricePopup ref not ready");
            }
        },
        hidePricePicker() {
            // Resetting price/time on cancel might not be desired UX, consider removing
            // this.price = '';
            // this.time = '';
            if (this.$refs.pricePopup) {
                this.$refs.pricePopup.close();
            }
        },
        confirmPricePicker() {
            // Price and time are already bound with v-model
            if (this.$refs.pricePopup) {
                this.$refs.pricePopup.close();
            }
        },

        // Hero Popup Methods
        showHeroPicker() {
            if (this.$refs.heroPopup) {
                this.$refs.heroPopup.open();
            } else {
                console.error("heroPopup ref not ready");
            }
        },
        hideHeroPicker() {
            if (this.$refs.heroPopup) {
                this.$refs.heroPopup.close();
            }
        },
        selectHeroItem(item) {
            // The HeroSelect component emits the selected item
            this.hero = item.text; // Assuming item has a 'text' property
            this.hideHeroPicker();
        },

        // Special Requirements Popup Methods
        showSpecialPicker() {
            if (this.$refs.specialPopup) {
                this.$refs.specialPopup.open();
            } else {
                console.error("specialPopup ref not ready");
            }
        },
        hideSpecialPicker() { // Renamed from original 'hideSpecialPicker' which conflicted
            if (this.$refs.specialPopup) {
                this.$refs.specialPopup.close();
            }
        },
        confirmSpecialPicker() {
            // Data (securityDeposit, efficiencyDeposit, compensatePoints, penalty) is bound with v-model
            this.hideSpecialPicker(); // Just close the popup
        },

        // Basic Form Validation
        validateForm() {
            if (!this.gameAccount) {
                uni.showToast({ title: '请输入游戏账号', icon: 'none' });
                return false;
            }
            if (!this.gamePassword) {
                uni.showToast({ title: '请输入游戏密码', icon: 'none' });
                return false;
            }
            if (!this.gameRole) {
                uni.showToast({ title: '请输入游戏角色名', icon: 'none' });
                return false;
            }
            if (!this.contactInfo) {
                uni.showToast({ title: '请输入联系方式', icon: 'none' });
                return false;
            }
            // Add more specific validation if needed (e.g., phone format)
            return true;
        },

        // Content Check (Placeholder - Implement actual API call)
        async checkContent() {
            const contentToCheck = [
                this.gameAccount,
                this.gamePassword,
                this.gameRole,
                this.contactInfo,
                this.hero,
                // Add other text fields needing checks
            ].filter(text => !!text).join(',');

            if (!contentToCheck) return true; // Nothing to check

            console.warn("Content check (checkText API call) needs implementation.");
            // try {
            //     const res = await checkText({ content: contentToCheck });
            //     if (res.code !== 200 || (res.data && res.data.result !== 1)) {
            //         uni.showToast({ title: '提交内容包含敏感词汇，请修改', icon: 'error', duration: 3000 });
            //         return false;
            //     }
            //     return true;
            // } catch (error) {
            //     console.error('Error checking text content:', error);
            //     uni.showToast({ title: '内容安全检查失败', icon: 'none' });
            //     return false;
            // }
            return true; // Assume safe for now
        },

        // Submit Order Logic (Placeholder - Implement actual API call)
        async submitOrder() {
            if (!this.validateForm()) return;

            const isContentSafe = await this.checkContent();
            if (!isContentSafe) return;

            uni.showLoading({ title: '正在发布订单...' });

            const orderPayload = {
                // Combine data from formData (route params) and local state
                ...this.formData,
                boost_type: 'DL', // From file path
                game_account: this.gameAccount,
                game_password: this.gamePassword,
                game_role: this.gameRole,
                contact_info: this.contactInfo,
                price: parseFloat(this.price),
                time_limit: parseInt(this.time),
                specified_hero: this.hero,
                security_deposit: this.securityDeposit,
                efficiency_deposit: this.efficiencyDeposit,
                compensate_points: this.compensatePoints,
                penalty_enabled: this.penalty,
                // Add user ID, generate title, etc.
                title: `英雄联盟代练 ${this.formData.currentTask || ''} -> ${this.formData.toTask || ''}`, // Example title
                // user_id: store.state.userInfo.id, // Get from Vuex or global state
            };

            console.log("Submitting Order Payload:", orderPayload);
            console.warn("Order submission (createOrder API call) needs implementation.");

            // Placeholder for API call
            await new Promise(resolve => setTimeout(resolve, 1500)); // Simulate network delay

            uni.hideLoading();
            uni.showToast({ title: '订单发布成功 (模拟)', icon: 'success' });

            // Navigate to order list or success page
            // setTimeout(() => {
            //   uni.switchTab({ url: '/pages/OrderList/index' });
            // }, 1500);

            // try {
            //     const res = await createOrder(orderPayload);
            //     uni.hideLoading();
            //     if (res.code === 200) {
            //         uni.showToast({ title: '订单发布成功!', icon: 'success' });
            //         setTimeout(() => {
            //             uni.switchTab({ url: '/pages/OrderList/index' });
            //         }, 1500);
            //     } else {
            //         uni.showToast({ title: res.msg || '订单发布失败', icon: 'none' });
            //     }
            // } catch (error) {
            //     uni.hideLoading();
            //     console.error('Error submitting order:', error);
            //     uni.showToast({ title: '订单发布异常', icon: 'none' });
            // }
        }
    }
};
</script>

<style scoped>
.submitOrder {
    width: 100%;
    min-height: 100vh;
    /* Use min-height */
    background-color: #eee;
    padding-bottom: 100rpx;
    /* Add padding to prevent footer overlap */
}

.info {
    padding: 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.order-msg {
    display: flex;
    flex-direction: column;
}

.order-msg .msg1 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20rpx;
    word-wrap: break-word;
    /* Allow long text to wrap */
}

.order-msg .msg1 span {
    margin-right: 10rpx;
    /* Spacing between items */
}

.order-msg .msg2 {
    font-size: 13px;
    font-weight: 400;
}

.preferred-price {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.5);
    margin-top: 40rpx;
    position: relative;
    border-radius: 7px;
    border-bottom: 5px solid #57b1ff;
}

.preferred-price .title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20rpx;
}

.preferred-price .price {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
}

.preferred-price .price .price-value-amount {
    font-size: 20px;
    color: red;
    font-weight: bold;
    margin-right: 5rpx;
}

.preferred-price .time {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
}

.preferred-price .tip {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 400;
    color: #aaa;
    margin-top: 30rpx;
}

.preferred-price image {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 40rpx;
    height: 40rpx;
    cursor: pointer;
    /* Add pointer cursor */
}

.login-mode {
    margin-top: 10rpx;
    padding: 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.login-mode .tab {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 40rpx;
}

.login-mode .username,
.login-mode .phone,
.login-mode .contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    padding: 10rpx 0;
    /* Add some padding */
    border-bottom: 1rpx solid #f0f0f0;
    /* Add separator */
    font-size: 14px;
    /* Slightly larger font */
}

.login-mode .username:last-child,
.login-mode .phone:last-child,
.login-mode .contact:last-child {
    border-bottom: none;
}


.login-mode .label {
    width: 40%;
    /* Adjust width */
    color: #333;
}

.login-mode .handle {
    width: 60%;
    /* Adjust width */
    display: flex;
    justify-content: flex-end;
}

.login-mode input {
    text-align: right;
    font-size: 14px;
    color: #333;
    width: 100%;
}

.login-mode input::placeholder {
    color: #aaa;
}


.point-hero,
.special-task {
    margin-top: 10rpx;
    padding: 30rpx 40rpx;
    /* Adjust padding */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 1rpx solid #f0f0f0;
}

.point-hero:last-of-type,
.special-task:last-of-type {
    border-bottom: none;
}

.point-hero .label,
.special-task .label {
    font-size: 15px;
    /* Adjust font size */
    font-weight: normal;
    /* Adjust weight */
    color: #333;
}

.point-hero .handle,
.special-task .handle {
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Align right */
    /* padding: 0 20rpx; Remove padding if not needed */
    height: 50rpx;
    border-radius: 8rpx;
    font-size: 14px;
    /* Match label font */
    color: #666;
}

.selected-tag image {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
    /* Adjust spacing */
}


/* ... Input group, picker styles (mostly unchanged) ... */

/* 弹窗样式 */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}

.popup-content .title {
    width: 100%;
    font-size: 18px;
    /* Adjust size */
    font-weight: bold;
    text-align: center;
    padding: 30rpx 20rpx 20rpx;
    /* Adjust padding */
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
}

.server,
.order-require,
.special-require {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 20rpx 40rpx 40rpx;
    /* Adjust padding */
    box-sizing: border-box;
}

.server-title,
.order-require-title,
.special-require-title {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 20rpx;
    margin-bottom: 10rpx;
    /* Add margin */
    border-bottom: 1rpx solid #f0f0f0;
    /* Add separator */
}

.server-content,
.order-require-content {
    display: flex;
    max-height: 300rpx;
    overflow-y: auto;
    flex-direction: column;
    padding: 0 10rpx;
    /* Adjust padding */
    box-sizing: border-box;
}

.server-content-item,
.order-require-content-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-top: 15rpx;
    /* Adjust spacing */
    font-size: 13px;
    color: #666;
    /* Darker text */
    line-height: 1.5;
}

.server-content-item-text {
    width: 30%;
    flex-shrink: 0;
}

.server-content-item-value {
    color: #333;
    flex-grow: 1;
    /* Allow input to grow */
    margin: 0 10rpx;
}

.server-content-item-value input {
    width: 100%;
    border: 1rpx solid #ddd;
    padding: 5rpx 10rpx;
    border-radius: 5rpx;
    font-size: 13px;
}

.server-content-item-unit {
    text-align: right;
    color: #333;
    width: 50rpx;
    /* Fixed width for unit */
    flex-shrink: 0;
}

.special-require-content {
    display: flex;
    align-items: center;
    padding: 0 10rpx;
    /* Adjust padding */
    box-sizing: border-box;
    margin-top: 20rpx;
    font-size: 14px;
    /* Increase size slightly */
    color: #333;
}

.special-require-content checkbox {
    margin-right: 15rpx;
    transform: scale(.9);
}

.level,
.role {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 40rpx;
    /* Adjust padding */
    box-sizing: border-box;
    border-bottom: 1rpx solid #eee;
}

.level span,
.role span {
    color: #333;
    font-size: 15px;
}

.level input,
.role input {
    width: 60%;
    text-align: right;
    font-size: 15px;
    color: #333;
    border: none;
}


.popup-scroll {
    max-height: 60vh;
    /* Adjust max height */
    overflow-y: auto;
}

.popup-item {
    padding: 25rpx 40rpx;
    /* Adjust padding */
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
}

.popup-item:last-child {
    border-bottom: none;
}


.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 16px;
    padding: 25rpx;
    color: #fff;
    background: #57b1ff;
    border-top: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-footer:active {
    background-color: #4a9cec;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 25rpx;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-footer2 .cancel {
    color: #198dda;
}

.popup-footer2 .cancel:active {
    background-color: #f2f2f2;
}

.popup-footer2 .confirm {
    background-color: #198dda;
    color: #fff;
}

.popup-footer2 .confirm:active {
    background-color: #157ab3;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    /* Add left: 0 */
    width: 100%;
    height: 86rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    /* Increase font size */
    font-weight: bold;
    color: #fff;
    background-color: #57b1ff;
    cursor: pointer;
}

.footer .button:active {
    background-color: #4a9cec;
}
</style>